import { useEffect, useMemo, useState } from 'react';
import { Modal, Button, InputNumber, Typography, Tag, Popconfirm, Popover } from '@arco-design/web-react';

interface TagWithWeightProps {
  value: {
    text: string,
    weight: number
  };
  onChange: (value: {
    text: string,
    weight: number
  }) => void;
  onRemove?: (e: any) => Promise<any> | void;
  onPopoverVisible: (visible: boolean) => void;
}



// 根据文本生成固定颜色 (适合深色主题)
const generateColorFromText = (text: string) => {
  // 简单哈希算法
  let hash = 0;
  for (let i = 0; i < text.length; i++) {
    hash = text.charCodeAt(i) + ((hash << 5) - hash);
  }
  
  // 转换为HSL颜色 (适合深色主题的暗色调)
  const h = Math.abs(hash) % 360; // 色调 0-360
  const s = 30 + Math.abs(hash) % 40; // 饱和度 30-70% (中等饱和度)
  const l = 15 + Math.abs(hash) % 10; // 亮度 30-70% (较暗)
  
  return `hsl(${h}, ${s}%, ${l}%)`;
};

export function TagWithWeight({ value, onChange, onRemove, onPopoverVisible }: TagWithWeightProps) {
  const { text, weight } = value;

  const [innerWeight, setInnerWeight] = useState(weight);

  const handleWeightChange = (newWeight: number) => {
    const clampedWeight = Math.min(Math.max(newWeight, 0.1), 1.5);
    onChange({
      text: text,
      weight: clampedWeight,
    });
  };

  return (
    <>
          
      <Popover
        onVisibleChange={(visible) => {
          // onPopoverVisible(visible);
        }}
        triggerProps={{
          onClickOutside: () => {
            handleWeightChange(innerWeight)
          },

        }}
        trigger="click"
        content={
          <InputNumber
            mode="button"
            step={0.1}
            min={0.1}
            max={1.5}
            value={innerWeight}
            onChange={setInnerWeight}
            size="default"
          />
        }>
        <Tag 
          className="mb-1 mt-1 mr-2"
          color={generateColorFromText(text)}
          size="default"
          closable
          bordered
          onClose={onRemove}
        >
          {weight !== 1? `${text}: ${weight}` : text}
        </Tag>
      </Popover>
 
    </>
  );
}
